<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div>
        <!-- 调查任务申请页面 -->
        <div class="container">
            <el-form :model="formInline" ref="formInline" class="select-submit-form">
                <el-row type="flex">
                    <el-col :span="8">
                      <el-form-item prop="caseNo" label="大病赔案号">
                        <el-input  v-model="formInline.caseNo"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item prop="insuredName" label="被保险人">
                            <el-input  v-model="formInline.insuredName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item prop="documentNo" label="证件号">
                            <el-input v-model="formInline.documentNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="select-btn-group">
                            <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                            <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
              :data="tableData"
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin: 30px 0;border: 1px solid #d6d9d8;"
              v-loading="loading"
              element-loading-text="Loading....."
            >
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="" label="大病赔案号" width="165"  align="center">
                  <template slot-scope="scope" >
                    <a @click="toApplyDetail(scope.row)" style="color: #1e99f9;cursor: pointer">{{ scope.row.caseNo }}</a>
                  </template>
                </el-table-column>
                <el-table-column prop="policyNo" label="保单号" width="165" align="center"></el-table-column>
                <el-table-column prop="insuredName" label="被保险人" align="center"></el-table-column>
                <el-table-column prop="documentNo" label="证件号" align="center"></el-table-column>
                <el-table-column prop="socialSecurityNo" label="社/医保号" align="center"></el-table-column>
                <el-table-column prop="damageDate" label="出险时间" align="center"></el-table-column>
                <el-table-column prop="flowInTime" label="流入时间" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <div v-show=" pagination.totalPage>0" class="index_page">
                    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                  :page-sizes="[10, 25, 50, 100, 500, 1000, 5000]"
                                  :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                  @size-change="handleSizeChange" @current-change="queryFun">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {querySurveyTask} from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'surveyTaskApply',
    data() {
        return {
            loading: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            formInline: {},
            dialogFormVisible: false,
            sponsorSurvey: {},
            tableData: [],
        };
    },
    created() {
    },
    methods: {
        //查询
        handleSearch(){
            this.querySurveyTaskList();
        },
        // 重置
        handleReset(formName){
             this.$refs[formName].resetFields();
        },
        // 改变当前页条数事件
        handleSizeChange(pageSize){
            this.pagination.rowsNumber=pageSize
            this.querySurveyTaskList();
        },
        // 改变当前页事件
        queryFun(pageNum){ 
            this.pagination.currentPage = pageNum;
            this.querySurveyTaskList();
        },
        // 查询案件列表
        querySurveyTaskList() {
            var data = {
                ...this.formInline,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.rowsNumber,
                comCode: Cookies.get("makeCom")
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            querySurveyTask(data)
                .then(res => {
                    this.loading = false;
                    if(res){
                        this.tableData = res.data.list;
                        this.pagination.totalPage=res.data.total;
                    }else{
                        this.$message.error('系统异常'); 
                    }
                })
        },
        // 跳转至详情页面
        toApplyDetail(row){
            this.sponsorSurvey=row,
            this.$router.push({
                name: 'surveyTaskApplyDetail',
                query: {sponsorSurvey: JSON.stringify(this.sponsorSurvey)}
            })
        }
    }
}
</script>